{% load static %}
<table class="table table-bordered table-striped table-condensed">
  <thead>
    <tr>
      <th width="20%">Name</th>
      <th width="10%">Parent</th>
      <th width="15%">Status</th>
      <th width="20%">Date Start</th>
      
      <th width="8%">Actions</th>
    </tr>
  </thead>
  <tbody id="meetingslist">
    {% for meeting in meetings %}
    <tr id="meeting{{ meeting.id }}">
      <td><a id="meeting{{ meeting.id }}name" href="#">{{ meeting.name }}</a></td>
      <td id="meeting{{ meeting.id }}parent">{{ meeting.parent }}</td>
      <td id="meeting{{ meeting.id }}status">{{ meeting.status }}</td>
      <td id="meeting{{ meeting.id }}startdate">{{ meeting.start_date }}</td>
      <td>
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
          Action
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a id="meeting{{ meeting.id }}view" class="viewthis" href="#">View</a></li>
            <li><a id="meeting{{ meeting.id }}edit" class="editthis" href="#">Edit</a></li>
            <li><a id="meeting{{ meeting.id }}remove" class="removethis" href="#">Remove</a>
            <li><a class="setstatus" value="Held" href="#">Set Held</a></li>
            <li><a class="setstatus" value="Not Held" href="#">Set Not Held</a></li>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% if meetings|length == 0 %}
<div class="heading text-center"> No Meetings found</div>
{% endif %}
<div class="pagination_row text-center row marl">
  <ul class="pagination">
    <li>
      {% if meetings.has_previous %}
      <a class="paginate-me" href="?page={{ meetings.previous_page_number }}">Previous</a>
      {% endif %}
    </li>
    <li>
      {% for page in meetings.paginator.page_range %}
    <li class="{% if meetings.number == page %}active{% endif %}"><a class="paginate-me"
      href="?page={{ page }}">{{ page }}</a>
    </li>
    {% endfor %}
    </li>
    <li>
      {% if meetings.has_next %}
      <a class="paginate-me" href="?page={{ meetings.next_page_number }}">Next</a>
      {% endif %}
    </li>
  </ul>
</div>
<script>
  $('body').on('click', '.pagination li a', function (e) {
      e.preventDefault();
      URL = window.location.pathname + $(this).context.search
      $('.for-pagination').animate({width: '20px'})
      $.get(
          URL,
          function (data, status, xhr) {
              if (status == 'success') {
                  $('.for-pagination').html(data).animate({width: '100%'})
              }
              else if (status == 'error') {
                  $('.for-pagination').html('Something Went Wrong Try Again Later...')
              }
          });
  });
  
</script>
<script src="{% static 'js/setstatus.js' %}"></script>